<template>
  <div class="main-view">

    <div ref="canvas" class="canvas" />
    <div class="asss" />
  </div>
</template>

<script>
import {inject, onMounted, reactive, toRefs, watch} from 'vue'
import Modeler from 'bpmn-js/lib/Modeler'
import {markRaw} from 'vue-demi'

export default {
  name: 'Index',
  props: {
    id: {
      type: String,
      default: '',
    },
  },
  setup(props, context) {
    const api = inject('api')
    var data = reactive({
      id: null,
      url: '',
      canvas: null,
      bpmnModeler: null,
      propertiesPanel: null,
      svg: '',
      sss: '',
      visible: false,
      confirmLoading: false
    })

    const blobToBase64 = (blob) => {
      const fileReader = new FileReader()
      fileReader.onload = (e) => {
        data.url = e.target.result
      }
      fileReader.readAsDataURL(blob)
    }

    const handlXml = (id) => {
      api.myDealWith.YSTARTED_WORKFLOW(id).then((res) => {
        if (res.code === 0) {
          const a = res.data.bpmn20Xml
          data.bpmnModeler.importXML(a)
        }
      })
    }

    const handlInit = () => {
      data.bpmnModeler = markRaw(new Modeler({
        container: data.canvas, // this.$refs.canvas,
      }))
      handlXml(data.id)
    }

    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          data.id = newval
        }
      },
      { immediate: true, deep: true }
    )
    onMounted((_) => {
      // data.bpmnModeler = markRaw(new Modeler({
      //   container: data.canvas,//this.$refs.canvas,
      //   keyboard: {
      //     bindTo: window
      //   },
      //   height: 400,
      // }))
      // handlXml(data.id)
      handlInit()
    })

    return {
      ...toRefs(data),
    }
  },
}
</script>

<style scoped lang="scss">
  /* @import url(); 引入css类 */

  .canvas {
    width: 100%;
    height: 400px;

  }

  .main-view {
    width: 100%;
    height: 400px;
    position: relative;

    .asss {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;

    }
  }
</style>

